<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="assets/img/logo.png">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>UR Blog</title>
    <script
        type="text/javascript"> (function () { var css = document.createElement('link'); css.href = 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="stylesheet" href="assets/css/theme.css">
    <link type="text/css" href="css/button.css" rel="stylesheet">
    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/blog/">
    <link href="assets/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/blog_edit.css">
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script type="text/javascript" src="My97DatePicker/4.8/WdatePicker.js"></script>
    <script src="js/jquery_min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" style="opacity: 90%;">
        <a class="navbar-brand font-weight-bolder mr-3" href="index.html"><img src="assets/img/logo.png"
                style="width: 40px; height: 39px;"></a>
        <button class="navbar-light navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault"
            aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsDefault">
            <ul class="navbar-nav ml-auto align-items-center">
                <li class="nav-item">
                    <a class="nav-link active" href="blog_list.html">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="draft_box.html" style="color: brown;">草稿箱</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="person_center.html"><img class="rounded-circle mr-2" src="assets/img/av.png"
                            width="30"><span id="user" class="align-middle"></span></a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="blog-edit-container" >
        <div class="row" style="height: 80px;"></div>
        <div class="title">
            <span style="width: 70px; font-weight: bold;" >标题：</span>
            <input type="text" id="title" name="title" placeholder="请输入文章标题" style="border-style: solid;">
            <div class="dropdown">
                <button class="dropbtn" type="submit" id="submit"
                    onclick="if(getQueryVariable('blogId')!='')insertInBox();else{insert()}"
                    style="background-color:rgb(151, 9, 9) ; cursor: pointer; ">
                    发布文章</button>
                <div class="dropdown-content">
                    <a href="#" onclick="if(getQueryVariable('blogId')!='')saveInBox();else{save()}">保存草稿</a>
                </div>
            </div>
        </div>
        <div style="height: 10px;"></div>
        <div class="sm" style="height: 40px">
            <span style="font-weight: bold;"> 发布方式:</span>
            <input type="radio" name="way" style="font-weight: bold;">立即发布</input>
            <input type="radio" name="way" onclick="settime()" style="font-weight: bold;">定时发布</input>
            <input type="text" style="border-style: solid; border-radius: 5px; border-color: black;" class="Wdate"
                id="sftime" onclick="dateClick()" value="">
        </div>
        <div id="editor">
            <textarea name="contents" style="display: none; "></textarea>
        </div>
    </div>
</body>
<script>
    var editor = editormd("editor", {
        // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
        width: "100%",
        // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
        height: "calc(100% - 50px)",
        // 编辑器中的初始内容
        markdown: "# 请编辑你的博客",
        // 指定 editor.md 依赖的插件路径
        path: "editor.md/lib/",
        saveHTMLToTextarea: true
    });
</script>
<script>
    //获取页面url的键值对
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) { return pair[1]; }
        }
        return (false);
    }
    function revise() {
        jQuery.ajax({
            type: 'get',
            url: '/art/getone' + location.search,
            success: function (body) {
                var t = document.getElementById("title");
                //将标题填进去
                t.value = body.data.title;
                blogContent = body.data.content;
                var editor = editormd("editor", {
                    // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
                    width: "100%",
                    // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
                    height: "calc(100% - 50px)",
                    // 编辑器中的初始内容
                    markdown: blogContent,
                    // 指定 editor.md 依赖的插件路径
                    path: "editor.md/lib/",
                    saveHTMLToTextarea: true,
                    dialogMaskBgColor : "#000",
                });
            }
        })
    }
    if (getQueryVariable("blogId") != "") {
        var blogContent;
        //将草稿内容填进编辑器
        revise();
    }
    function logout() {
        jQuery.ajax({
            type: 'post',
            url: '/user/logout',
            success: function (body) {
                if (body.data == true) {
                    alert("注销成功");
                    location.href = "login.html";
                } else {
                    alert("系统繁忙，注销失败");
                }
            },
            error: function (body) {
                alert("系统繁忙，注销失败");
            }
        })
    }
    //直接发布博客
    function insert() {
        //判断是否为定时发布
        var radio = document.getElementsByName("way");
        var createtime;
        var updatetime;
        var state;
        if (radio[1].checked) {
            //定时发布
            state = -1
            createtime = document.getElementById("sftime").value;
            console.log(createtime);
            updatetime = createtime;
        } else if (radio[0].checked) {
            state = 1;
        } else {
            alert("请选择发布方式");
            return;
        }
        //1.获取变量
        var title = jQuery("#title");
        jQuery.ajax({
            type: 'post',
            url: '/art/add',
            data: {
                title: title.val(),
                content: editor.getMarkdown(),
                createtime: createtime,
                updatetime: updatetime,
                "state": state,//当state为1是为发布
            },
            success: function (body) {
                alert("发布成功！");
                location.href = "blog_list.html";
            },
            error: function (body) {
                alert("服务器繁忙，发布失败，请重试");
            }
        })
    }
    //第一次保存博客到草稿
    function save() {
        //1.获取变量
        var title = jQuery("#title");
        jQuery.ajax({
            type: 'post',
            url: '/art/add',
            data: {
                title: title.val(),
                content: editor.getMarkdown(),
                "state": 0//当state为0是保存草稿
            },
            success: function (body) {
                alert("保存成功！");
                location.href = "blog_list.html";
            },
            error: function (body) {
                alert("服务器繁忙，保存失败，请重试");
            }
        })
    }
    //在草稿中发布
    function insertInBox() {
        //判断是否为定时发布
        var radio = document.getElementsByName("way");
        var createtime;
        var updatetime;
        var state;
        if (radio[1].checked) {
            //定时发布
            state = -1
            createtime = document.getElementById("sftime").value;
            console.log(createtime);
            updatetime = createtime;
            var title = jQuery("#title");
            //直接发布
            jQuery.ajax({
                type: 'post',
                url: '/art/add',
                data: {
                    title: title.val(),
                    content: editor.getMarkdown(),
                    createtime: createtime,
                    updatetime: updatetime,
                    "state": state,//当state为1是为发布
                },
                success: function (body) {
                    alert("发布成功！");
                    location.href = "blog_list.html";
                },
                error: function (body) {
                    alert("服务器繁忙，发布失败，请重试");
                }
            });
            //再从草稿中删除
            $.ajax({
                type: 'delete',
                url: '/art/del' + location.search,
                success: function (body) {
                    location.href = "blog_list.html";
                }
            })
        } else if (radio[0].checked) {
            //1.获取变量
            var title = jQuery("#title");
            jQuery.ajax({
                type: 'post',
                url: '/art/revise' + location.search,
                data: {
                    title: title.val(),
                    content: editor.getMarkdown(),
                    "state": 1//当state为1是为发布
                },
                success: function (body) {
                    alert("发布成功！");
                    location.href = "blog_list.html";
                },
                error: function (body) {
                    alert("服务器繁忙，发布失败，请重试");
                }
            })
        } else {
            alert("请选择发布方式");
        }
    };
    //在草稿中保存
    function saveInBox() {
        //1.获取变量
        var title = jQuery("#title");
        jQuery.ajax({
            type: 'post',
            url: '/art/revise' + location.search,
            data: {
                title: title.val(),
                content: editor.getMarkdown(),
                "state": 0//当state为0是保存草稿
            },
            success: function (body) {
                alert("保存成功！");
                location.href = "blog_list.html";
            },
            error: function (body) {
                alert("服务器繁忙，保存失败，请重试");
            }
        })
    }

    //选择时间日期组件
    function dateClick() {
        WdatePicker({
            el: $dp.$('stime'),  //设置后不管是点谁触发的弹框都认为是stime绑定者弹出的，值赋给绑定者
            dateFmt: 'yyyy-MM-dd HH:mm:ss',  //格式设置相对应界面可选择也变化
            skin: "twoer",  //whyGreen绿色风格，twoer橙色风格，默认default
            //startDate:'%y-%M-01 00:00:00', //默认开始选中时间，格式必须和dateFmt中保持一致,例'2018-05-21 00:00:00'
            //lang:"en",  //英文版本，默认为中文；:'en', charset:'UTF-8'；'zh-cn', charset:'gb2312'；'zh-tw', charset:'GBK'
            minDate: '%y-%M-%d #{%H+2}:%m:%s',  //其中\''\中表示默认取id为stime1的值，注意stime1中的时间格式必须要dateFmt保持一致。第二个参数为调整日期，这里是向前调10天
            // maxDate:'%y-%M-{%d+1} 23:59:59', //最大可选择时间，明天最后时刻
            // firstDayOfWeek: 1  //一周从周几开始，默认为0，周日开始
            highLineWeekDay: true,  //周末的日期是否高亮
            readOnly: false,  //是否允许键盘输入值，false为禁止输入，只能鼠标选
            //position:{left:100,top:50}},  //调整位置		
        });
    }
    //点击定时发布时，默认将两小时后的时间填进输入框
    function settime() {
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "H+": this.getHours() + 2, //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
        var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");
        document.getElementById("sftime").value = time2;
    }
</script>

</html>